<template>
	<view>
		<view class="bg_img"><image src="../../static/demo/topicpic/13.jpeg"></image></view>
		<view class="user_message">
			<view class="avtor">
				<image src="../../static/demo/topicpic/13.jpeg"></image>
				<view class="title">以往是，敬余生</view>
			</view>
			<view class="read_num">
				<view class="dy">动态 793</view>
				<view class="today">今日 641</view>
			</view>
			<view class="intriduce">面试官:在电梯里巧遇马云你会做什模？90后女孩的回答直接被录用</view>
		</view>
		<view class="tabs">
			<view class="text" @tap="changeIndex(index)" v-for="(item, index) in tabBars" :key="index" :class="tabIndex === index ? 'activeColor' : ''">{{ item.name }}</view>
		</view>
		<!-- 最新开始 -->
		<view class="moren" v-if="tabIndex===tabBars[0].id">
			<scroll-view :style="{ height: swiperHight + 'px' }" @scrolltolower="pullUpLoad" scroll-y>
			<!-- 图文列表 -->
			<view class="tabList" v-for="(item,index) in tabList.list" :key="index">
				<DynamicList :itemLis="item" :index="index"></DynamicList>
			</view>
			<!-- 图文列表结束 -->
			<!-- 上拉加载 -->
			<PullUpLoad :loadtext="tabList.loadtext"></PullUpLoad>
			</scroll-view>
		</view>
		<view class="zuixin" v-else>
			<scroll-view :style="{ height: swiperHight + 'px' }" @scrolltolower="pullUpLoad" scroll-y>
			<!-- 图文列表 -->
			<view class="tabList" v-for="(item,index) in tabList.list" :key="index">
				<DynamicList :itemLis="item" :index="index"></DynamicList>
			</view>
			<!-- 图文列表结束 -->
			<!-- 上拉加载 -->
			<PullUpLoad :loadtext="tabList.loadtext"></PullUpLoad>
			</scroll-view>
		</view>  
		<!-- 最新结束 -->
	</view>
</template> 

<script>
import tabs from '../../components/tabs/tabs';
import DynamicList from '../../components/dynamic-list/dynamic-list';
import PullUpLoad from '../../components/pullUpLoad/pullUpLoad.vue';
export default {
	components: {
		tabs,
		DynamicList,
		PullUpLoad
	},
	onLoad() {
		// 获取可使用窗体高度
		uni.getSystemInfo({
			success: res => {
				let hight = res.windowHeight - uni.upx2px(250);
				this.swiperHight = hight;
			}
		});
	},
	data() {
		return {
			tabIndex: 0,
			swiperHight: 200,
			tabBars: [
				{
					name: '默认',
					id: 0,
					isShow: true
				},
				{
					name: '最新',
					id: 1,
					isShow: false
				}
			],
			tabList: {
				loadtext: '上拉加载更多',
				list: [
					// 文字
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 图文
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 视频
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: {
							looknum: '20w',
							long: '2:47'
						},
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 分享
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '',
						video: false,
						share: {
							title: '我是分享的标题',
							titlepic: '../../static/demo/datapic/14.jpg'
						},
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
				]
			}
		};
	},
	// 监听用户下拉刷新
	onPullDownRefresh(){
		this.getPullData()
	},
	methods: {
		changeIndex(index) {
			this.tabIndex = index;
		},
		// 用户下拉刷新
		getPullData(){
			setTimeout(()=>{
				// 获取数据
				let arr=[
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					// 图文
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '哈哈',
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: false,
						share: false,
						path: '深圳 龙岗',
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
				]
				// 赋值
				this.tabList[this.tabIndex].list=arr
				// 停止刷新
				uni.stopPullDownRefresh()
			},2000)
		},
		// 上拉加载更多
		pullUpLoad() {
			// 判断数据
			if (this.tabList .loadtext !== '上拉加载更多') {
				return;
			}
			// 修改状态
			this.tabList.loadtext = '加载中...';
			setTimeout(() => {
				let obj = {
					userpic: '../../static/demo/userpic/12.jpg',
					username: '哈哈',
					sex: 0, //0 男 1 女
					age: 25,
					isguanzhu: false,
					title: '我是标题',
					titlepic: '../../static/demo/datapic/13.jpg',
					video: false,
					share: false,
					path: '深圳 龙岗',
					sharenum: 20,
					commentnum: 30,
					goodnum: 20
				};
		
				this.tabList.list.push(obj);
				this.tabList.loadtext = '上拉加载更多';
			}, 1000);
			// this.news[index].loadtext = '没有加载的数据'
		}
	}
};
</script>

<style lang="less" scoped>
.bg_img {
	image {
		width: 100%;
		height: 300rpx;
		filter: blur(6px);
	}
}
.user_message {
	position: relative;
	padding: 0 25rpx;
	.avtor {
		display: flex;
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			position: absolute;
			top: -60rpx;
			left: 30rpx;
		}
		.title {
			position: absolute;
			left: 200rpx;
			top: 20rpx;
		}
	}
	.read_num {
		display: flex;
		margin-top: 120rpx;
		color: #aeaeae;
		.today {
			margin-left: 15rpx;
		}
	}
	.intriduce {
		color: #c0c0c0;
		margin: 15rpx 0;
	}
}
.tabs {
	display: flex;
	justify-content: space-around;
	color: #999;
	.text {
		padding: 10rpx;
	}
}
.zuixin,
.moren{
	padding: 0 20rpx;
}
.activeColor {
	color: #000000;
	font-size: 550;
	border-bottom: 6rpx solid #fede33;
}
</style>
